@import 'est/src/all.less';






.global-reset();

html{
	font-size: 16px;
}

.radius(@rad:8){ 
	-moz-border-radius: @rad/1px; 
	-webkit-border-radius: @rad/1px; 
	border-radius: @rad/1px; 
	-moz-border-radius: @rad/16rem; 
	-webkit-border-radius: @rad/16rem; 
	border-radius: @rad/16rem; 
}

.background-image(@url){
    background-image: url(@url);
    background-repeat: no-repeat;
}

.Size(@width: 0,@height: 0){
	width: @width /1px;
	height: @height /1px;
	width: @width /16rem;
	height: @height /16rem;
}

.max-width(@width){
	max-width: @width /1px;
	max-width: @width /16rem;
}

.min-width(@width){
	min-width: @width /1px;
	min-width: @width /16rem;
}

.height(@height: 0){
	height: @height /1px;
	height: @height /16rem;
}

.width(@width: 0){
	width: @width /1px;
	width: @width /16rem;
}

.font-size(@size){
	font-size: @size /1px;
	font-size: @size /16rem;
}

.line-height(@height: 0){
	line-height: @height /1px;
	line-height: @height /16rem;
}

.animation(@name,@duration:0,@timing:ease,@delay:0,@count:1,@direction:normal){
	//名字 时长 运动方式 延迟 运动次数 是否反向播放
	animation: @name @duration @timing @delay @count @direction;
	/* Firefox: */
	-moz-animation: @name @duration @timing @delay @count @direction;
	/* Safari 和 Chrome: */
	-webkit-animation: @name @duration @timing @delay @count @direction;
	/* Opera: */
	-o-animation: @name @duration @timing @delay @count @direction;
}



.box-sizing{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before,.clearfix:after {
		content: " ";
		display: table;
}
.clearfix:after {
		clear: both;
}
.clearfix {
		*zoom: 1;
}

*{
	margin: 0;
	padding: 0;
	.box-sizing;
}
a{
	text-decoration:none;
}


body{
	.min-width(830);
}


#header{
	.height(60);
	width: 100%;
	background-color: #303030;
	.head{
		.max-width(1600);
		padding:0 20px;
		padding: 0 1.25rem;
		margin: 0 auto;
	}
	.logo{
		.Size(137,24);
		float: left;
		.margin-top-rem(18px);
		.margin-left-rem(30px);
		background: url(../img/logo.png) no-repeat;
		background-size: contain; 
	}
	.login,.use{
		height: 100%;
		float: right;
		cursor: pointer;
		.padding-left-rem(30px);
		.padding-right-rem(30px);
		&:hover{
			p{
				color: #fff;
			}
		}
		p{
			.line-height(60);
			color: #A4A4A4;
			font-weight: bold;
		}
	}
	.use{
		position: relative ;
		z-index: 9997;
		p{
			.min-width(50);
		}
		.menu{
			position: absolute;
			left:0;
			width: 100%;
			background-color: #353535;
			display: none;
			div{
				cursor:pointer;
				line-height: 38px;
				line-height: 38/16rem;
				color: #fff;
				text-align: center;
				font-weight: bold;
				&:hover{
					background-color: #EE644F;
				}
			}
		}
	}
	.search{
		.height(32);
		float: right;
		.margin-top-rem(14px); 
		.margin-bottom-rem(14px); 
		.padding-right-rem(20px);
		border-right: 1px solid #3B3B3B;
		form{
			float: right;
			input{
				padding: 7px 10px;
				padding: .4375rem .625rem;
				display: none;
				float: right;
				border:1px solid #595959;
				width: 0;
				.radius(2);
				.padding-left-rem(10px);
				color: #ccc;
				background:url("../img/search.png") no-repeat scroll right center transparent;
				background-color: #474747;
				background-size: contain; 
			}
			#search{
				.width(210);
			}
		}
		#button{
			.Size(32,32);
			cursor: pointer;
			float: right;
			.background-image("../img/button.png");
			background-size: cover;
			display: block;
			&:hover{
				background-position:-32px 0;
				background-position:-2rem 0;
			}
		}
	}
}

#img{
	width: 100%;
	.height(367);
	background: url("../img/breakbottom.png") no-repeat center;
	background-color: #F8F8F8;
	.txt{
		.width(1200);
		height: 100%;
		margin: 0 auto;
		div{
			.Size(538,226);
			.background-image("../img/title.png");
			background-size: cover;
			cursor:pointer;
		}
	}
}


#entry{
	width: 100%;
	background-color: #F8F8F8;
	.entry{
		.max-width(980);
		margin: 0 auto;
		.padding-top-rem(50px);
		.padding-bottom-rem(20px);
		h1{
			font-family: 微软雅黑;
			text-align: center;
			.font-size(25);
			color: #555;
			.padding-bottom-rem(50px);
			cursor:pointer;
		}
		.fa{
			height: 100%;
			float: left;
			@media screen and (min-width:61.25rem){
				width: 20%;
			}
			@media screen and (max-width:61.25rem){
				width: 33.33%;
			}
		}
		.department{
			.Size(120,170);
			margin: 0 auto;
			cursor:pointer;
			.margin-bottom-rem(40px);
			.logo{
				.Size(120,120);
				background-size: cover;
				&:hover{
					background-position:-120px 0;
					background-position: -7.5rem 0;
				}
			}
			p{
				.padding-top-rem(30px);
				font-family: 微软雅黑;
				.font-size(20);
				color: #666;
				text-align: center;
				letter-spacing:2px;
			}
		}
		.manage{
			.logo{
				.background-image("../img/manage.png");
			}
		}
		.visual{
			.logo{
				.background-image("../img/visual.png");
			}
		}
		.web{
			.logo{
				.background-image("../img/web.png");
				&:hover{
					background-position:-123px 0;
					background-position:-123/16rem 0;
				}
			}
		}
		.mobile{
			.logo{
				.background-image("../img/mobile.png");
				&:hover{
					background-position:-128px 0;
					background-position:-128/16rem 0;
				}
			}
		}
		.operation{
			.logo{
				.background-image("../img/operation.png");
			}
		}
	}
}

#work{
	background-color: #EFEFEF;
	.height(300);
	width: 100%;
	overflow: hidden;
	.content{
		.max-width(1600);
		height: 100%;
		margin: 0 auto;
		background: url(../img/backgroud-img.png) no-repeat top center;
		.padding-top-rem(50px);
		h1{
			font-family: 微软雅黑;
			text-align: center;
			.font-size(25);
			color: #555;
			.padding-bottom-rem(30px);
			cursor:pointer;
		}
		.work{
			.Size(520,152);
			margin: 0 auto;
			position: relative ;
			.out{
				.Size(520,152);
				overflow: hidden;
				position:relative;
			}
			.in{
				.Size(2000,152);
				overflow: hidden;
				position: absolute;
				top:0;
				left:0;
			}
			.mid{
				height: 100%;
				.width(520);
				float: left;
			}
			.txt{
				height: 25%;
				.radius(19);
				cursor:pointer;
				color: #333;
				.padding-left-rem(20px);
				.padding-right-rem(20px);
				.line-height(38);
				.title{
					height: 100%;
					.inline-block();
					.max-width(250);
					overflow: hidden;
				}
				.people,.time{
					color: #666;
					float: right;
				}
				.people{
					.margin-right-rem(30px);
				}
				&:hover{
					background-color: #E58761;
					color: #fff;
					.animation(change,.5s);
					.people,.time{
						.animation(change,.5s);
						color: #fff;
					}
				}
			}
			.left,.right{
				position:absolute;
				top:48px;
				top:3rem;
				.Size(57,57);
				cursor:pointer;
				background-size: cover;
				&:hover{
					background-position: -57px 0 ;
					background-position: -3.5625rem 0;
				}
			}
			.left{
				left:-150px;
				left:-150/16rem;
				display: none;
				.background-image("../img/left.png");
			}
			.right{
				left:610px;
				left:610/16rem;
				.background-image("../img/right.png");
			}
		}
	}
}

#footer{
	.padding-top-rem(50px);
	width: 100%;
	color: #999;
	text-align: center;
	.font-size(12);
	.padding-bottom-rem(50px);
	p{
		.margin-top-rem(10px);
	}
	a{
		color: #999;
	}
}


#theme-popover,#changepass{
	z-index:9999;
	position:fixed;
	top:50%;
	left:50%;
	.Size(400,250);
	.margin-top-rem(-200px);
	.margin-left-rem(-201px);
	border:solid .5px #ccc;
	background-color:#FEFEFE;
	display:none;
	box-shadow: 0 0 2px #666;
	.theme-poptit {
		padding:12px;
		padding: .75rem;
		position: relative;
		.close {
			cursor: pointer;
			float:right;
			padding:5px;
			padding: 5/16rem;
			.Size(17,16);
			background: url("../img/close.png") no-repeat;
			background-size: cover;
			&:hover{
				background-position: -17px 0 ;
				background-position: -1.0625rem 0;
			}
		}
		h1{
			color: #2B2B2B;
			font-size: 18px;
			font-family: 微软雅黑;
			text-align: center;
			.padding-top-rem(20px);
			.padding-bottom-rem(15px);
			letter-spacing: 4px;
		}
	}
	.theme-popbod {
		.width(254);
		margin: 0 auto;
		input{
			width: 100%;
			padding: 6.5px;
			padding: 6.5/16rem;
			.font-size(15);
			.margin-bottom-rem(20px);
			border: 1px solid #E3E3E3;
			.padding-left-rem(48px);
			color: #333;
		}
		.user{
			background:url("../img/user.png") no-repeat;
			background-size: contain;
		}
		.pass{
			background:url("../img/pass.png") no-repeat;
			background-size: contain;
		}
		.btn{
			background-color: #E55E4B;
			box-shadow: .5px .5px 1px #333;
			cursor:pointer;
			border: none;
			.padding-left-rem(6.5px);
			color: #fff;
			&:hover{
				.animation(login,.2s);
			}
		}
	}
}

#changepass{
	.Size(400,290);
}

.theme-popover-mask,.theme-popover-mask-fff{
	z-index: 9998;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	opacity:0.4;
	filter:alpha(opacity=40);
	display:none;
}

.theme-popover-mask-fff{
	opacity:0;
	filter:alpha(opacity=0);
	z-index: 9996;
}

@keyframes change{
	0%   {background-color:#EFEFEF;color: #333;}
	100% {background-color:#E58761;color: #fff;}
}

/* Firefox */
@-moz-keyframes change {
	0%   {background-color:#EFEFEF;color: #333;}
	100% {background-color:#E58761;color: #fff;}
}

/* Safari 和 Chrome */
@-webkit-keyframes change {
	0%   {background-color:#EFEFEF;color: #333;}
	100% {background-color:#E58761;color: #fff;}
}

/* Opera */
@-o-keyframes change {
	0%   {background-color:#EFEFEF;color: #333;}
	100% {background-color:#E58761;color: #fff;}
}


@keyframes change_color{
	0%   {color: #333;}
	100% {color: #fff;}
}

/* Firefox */
@-moz-keyframes change_color {
	0%   {color: #333;}
	100% {color: #fff;}
}

/* Safari 和 Chrome */
@-webkit-keyframes change_color {
	0%   {color: #333;}
	100% {color: #fff;}
}

/* Opera */
@-o-keyframes change_color {
	0%   {color: #333;}
	100% {color: #fff;}
}


@keyframes login{
	0%   {background-color:#E55E4B;}
	100% {background-color:#EC553C;}
}

/* Firefox */
@-moz-keyframes login {
	0%   {background-color:#E55E4B;}
	100% {background-color:#EC553C;}
}

/* Safari 和 Chrome */
@-webkit-keyframes login {
	0%   {background-color:#E55E4B;}
	100% {background-color:#EC553C;}
}

/* Opera */
@-o-keyframes login {
	0%   {background-color:#E55E4B;}
	100% {background-color:#EC553C;}
}








.lt-ie9{
	.fa{
		.margin-right-rem(38px);
		.margin-left-rem(38px);
	}
}

.lt-ie8{
	.entry{
		height: 285px;
		width: 980px;
	}
	.fa{
		.Size(196,210);
		margin: 0 ;
		.department{
			padding: 0;
			margin: 0;
		}
	}
	.txt{
		color: #000;
		position:relative;
	}
	.people,.time{
		position:absolute;
		top:-1px;
	}
	.people{
		left:270px;
	}
	.time{
		left:400px;
	}
	#theme-popover,#changepass{
		.user,.pass{
			width: 200px;
		}
	}
	.entry{
		height: 285px;
		overflow: hidden;
	}
	.close{
		width: 17px !important;
		height: 16px !important;
		overflow: hidden !important;
		padding: 0 !important;
	}
	.mobile{
		.logo{
			background-position:0 0 !important;
			&:hover{
				background-position:-129px 0 !important;
			}
		}
	}
}

.lt-ie7{
	#theme-popover,#changepass{
		position: absolute ;
		margin: 0;
		top:210px;
		left: 600px;
	}
	.txt{
		padding-top: 0 !important;
		h1{
			margin-top: 40px;
		}
	}
	#button{
		background-position: -64px 0 !important;
	}
	.search input{
		background:url("../img/search-ie6.png") no-repeat scroll right center transparent !important;
		background-color: #474747; 
	}
	.department{
		.logo{
			background-position: -240px 0 !important;
		}
	}
	.web{
		.logo{
			background-position: -246px 0 !important;
		}
	}
	.mobile{
		.logo{
			background-position: -249px 0 !important;
		}
	}
	.theme-popover-mask{
		display: none !important;
	}
	.menu{
		width: 112px !important;
	}
}







